@charset "utf-8";

#content .content-top { background: url("../../images/game/guide/how-to-play/bg-page-top.jpg") 50% 0 no-repeat; }
.clear { padding-bottom:20px; }

.interface {width:100%; height:595px; background: url("../../images/game/guide/how-to-play/bg-contents-p-02.jpg") 100% 100% no-repeat; position:relative;}
.interface .guide-content-subtitle {padding-top:33px; margin-left:70px; display:block;}
.interface #interface-viewer {width:642px; height:405px; position:absolute; top:80px; left:83px;}

.interface #interface-viewer div {cursor: help; background: url("../../images/game/guide/how-to-play/interface-divs.jpg") 0 0 no-repeat; position:absolute;}
.interface #interface-viewer div.hidden { background-position:1000%; }

.interface #interface-viewer .div01 {top:1px; 	left:1px; 	background-position:-1px -1px; 		width:55px; height:68px;}
.interface #interface-viewer .div02 {top:24px; 	left:57px; 	background-position:-57px -24px; 	width:95px; height:12px;}
.interface #interface-viewer .div03 {top:32px; 	left:56px; 	background-position:-56px -32px; 	width:95px; height:13px;}
.interface #interface-viewer .div04 {top:24px; 	left:158px;	background-position:-158px -24px; 	width:94px; height:11px;}
.interface #interface-viewer .div05 {top:35px; 	left:158px;	background-position:-158px -35px; 	width:94px; height:10px;}
.interface #interface-viewer .div06 {top:4px;  	left:252px;	background-position:-252px -4px;	width:54px; height:52px;}
.interface #interface-viewer .div07 {top:4px;	left:544px;	background-position:-544px -4px; 	width:96px; height:93px;}
.interface #interface-viewer .div08 {top:350px;	left:48px;	background-position:-48px -350px;	width:129px; height:26px;}
.interface #interface-viewer .div09 {top:376px; left:48px;	background-position:-48px -376px; 	width:282px; height:29px;}
.interface #interface-viewer .div10 {top:376px;	left:332px;	background-position:-332px -376px;	width:148px; height:29px;}
.interface #interface-viewer .div11 {top:376px;	left:487px;	background-position:-487px -376px; 	width:107px; height:29px;}
.interface #interface-viewer .div12 {top:342px;	left:570px;	background-position:-570px -342px; 	width:69px; height:32px;}

#interface-list {position:absolute; left:752px; top:72px; width:173px;}
#interface-list a {cursor: help; background: url("../../images/game/guide/getting-started/interface-numbers.gif") 0 0 no-repeat; 
					font-size:12px; line-height:14px; display:block; padding:8px 0 6px 27px;}
#interface-list a span { font-size:11px; display:block; }					
#interface-list .l-01 {background-position:0 8px;}
#interface-list .l-02 {background-position:0 -30px;}
#interface-list .l-03 {background-position:0 -68px;}
#interface-list .l-04 {background-position:0 -104px;}
#interface-list .l-05 {background-position:0 -142px;}
#interface-list .l-06 {background-position:0 -180px;}
#interface-list .l-07 {background-position:0 -218px;}
#interface-list .l-08 {background-position:0 -256px;}
#interface-list .l-09 {background-position:0 -595px;}
#interface-list .l-10 {background-position:0 -633px;}
#interface-list .l-11 {background-position:0 -671px;}
#interface-list .l-12 {background-position:0 -709px;}
#interface-list .l-13 {background-position:0 -747px;}
#interface-list .l-14 {background-position:0 -785px;}
#interface-list .l-15 {background-position:0 -845px;}
#interface-list .l-16 {background-position:0 -861px;}

#interface-list .l-01:hover, #interface-list .l-01-hover {background-position:0 -292px; color:#fff;}
#interface-list .l-02:hover, #interface-list .l-02-hover {background-position:0 -330px; color:#fff;}
#interface-list .l-03:hover, #interface-list .l-03-hover {background-position:0 -368px; color:#fff;}
#interface-list .l-04:hover, #interface-list .l-04-hover {background-position:0 -404px; color:#fff;}
#interface-list .l-05:hover, #interface-list .l-05-hover {background-position:0 -442px; color:#fff;}
#interface-list .l-06:hover, #interface-list .l-06-hover {background-position:0 -480px; color:#fff;}
#interface-list .l-07:hover, #interface-list .l-07-hover {background-position:0 -518px; color:#fff;}
#interface-list .l-08:hover, #interface-list .l-08-hover {background-position:0 -556px; color:#fff;}
#interface-list .l-09:hover, #interface-list .l-09-hover {background-position:0 -895px; color:#fff;}
#interface-list .l-10:hover, #interface-list .l-10-hover {background-position:0 -933px; color:#fff;}
#interface-list .l-11:hover, #interface-list .l-11-hover {background-position:0 -971px; color:#fff;}
#interface-list .l-12:hover, #interface-list .l-12-hover {background-position:0 -1009px; color:#fff;}
#interface-list .l-13:hover, #interface-list .l-13-hover {background-position:0 -1047px; color:#fff;}
#interface-list .l-14:hover, #interface-list .l-14-hover {background-position:0 -1085px; color:#fff;}
#interface-list .l-15:hover, #interface-list .l-15-hover {background-position:0 -1123px; color:#fff;}
#interface-list .l-16:hover, #interface-list .l-16-hover {background-position:0 -1161px; color:#fff;}

.htp-2 { background: url("../../images/game/guide/how-to-play/bg-htp2.jpg") 100% 0 no-repeat; }
.htp-2 .guide-sub-desc { padding-right:25px; }
.parchment { width:449px; margin-top:39px; }
.parchment-tall { background:url(../../images/game/guide/how-to-play/parchment-tall.png) 50% 0 no-repeat; }
.parchment-short { background:url(../../images/game/guide/how-to-play/parchment-short.png) 50% 0 no-repeat; }

.parchment-interior { padding:52px 57px 50px 52px; color:#967648;}
.parchment-interior b { color:#FFFFFF; }

.left-col { float:left; width:490px;  }
.right-col { float:right; width:490px;  }

.parchment .guide-content-subtitle { margin:0; }
.parchment p { line-height:18px; margin:15px 0; }


.character-image { background:url(../../images/game/guide/how-to-play/characters.png); width:427px; height:344px; margin-left:48px; }

.section2, .section2 .left-col, .section3 .left-col  { position:relative; }
 
.section2 .clear { padding:40px; }

.talents-image { background:url(../../images/game/guide/how-to-play/talents.png); width:684px; height:624px; position:absolute; right:0; top:-252px }
.talent-screenshot { width:401px; height:197px; background:url(../../images/game/guide/how-to-play/talent-screenshot.jpg); margin:340px 0 0 223px; }


.section3 { position:relative; background:url(../../images/game/guide/how-to-play/bg-quests.jpg); } 
.section3-image { background:url(../../images/game/guide/how-to-play/section3-image1.png) right no-repeat; width:614px; height:475px; position:absolute; right:0; top:-80px; }

.section3 .clear { padding:0; }

.section-list { padding-top:80px }
.guide-content-subtitle table { margin-left:-5px; }
.section3 .section-list {  padding-left:50px; }
.section-list .left-col, .section-list .right-col { width:210px; }
.section-list .column-break { clear:both; }

.section-list .guide-content-subtitle { margin-left:0; } 

.section-list-image { position:relative; width:210px; background-position:50%; background-repeat:no-repeat; width:210px; } 
.section-list .img1 { background-image:url(../../images/game/guide/how-to-play/section3-list-image1.png); height:243px; top:-64px; margin-bottom:-64px; }
.section-list .img2 { background-image:url(../../images/game/guide/how-to-play/section3-list-image2.png); height:179px; }
.section-list .img3 { background-image:url(../../images/game/guide/how-to-play/section3-list-image3.png); height:191px; top:-24px; }
.section-list .img4 { background-image:url(../../images/game/guide/how-to-play/section3-list-image4.png); height:203px; }
.section-list .img5 { background-image:url(../../images/game/guide/how-to-play/section3-list-image5.png); height:127px; }
.section-list .img6 { background-image:url(../../images/game/guide/how-to-play/section3-list-image6.png); height:186px; }
.section-list .img7 { background-image:url(../../images/game/guide/how-to-play/section3-list-image7.png); height:164px; }

.icon-bullet { width:53px; height:45px; background:url(../../images/game/guide/how-to-play/htp-icons.png) no-repeat; float:left;  }
.bullet1 { background-position:-7px -6px; }
.bullet2 { background-position:-7px -88px; }
.bullet3 { background-position:-7px -170px; }
.bullet4 { background-position:-7px -253px; }
.bullet5 { background-position:-7px -335px; }
.bullet6 { background-position:-7px -417px; }
.bullet7 { background-position:-7px -499px; }
.bullet8 { background-position:-7px -582px; }
.bullet9 { background-position:-7px -664px; }
.bullet10 { background-position:-7px -746px; }
.bullet11 { background-position:-7px -832px; }

.bullet-desc { clear:left; color:#967648; padding:10px 0 50px; }

.quest-type-title { color:#e9bd7f; text-transform:uppercase; padding:0 0 7px 26px; line-height:20px; background:url(../../images/game/guide/how-to-play/quest-icons.gif) no-repeat; }

.quest-type .img1 { background-position:0 -5px; }
.quest-type .img2 { background-position:0 -32px; }
.quest-type .img3 { background-position:0 -60px; }
.quest-type .img4 { background-position:0 -88px; }
.quest-type .img5 { background-position:0 -116px; }
.quest-type .img6 { background-position:0 -148px; }
.quest-type .img7 { background-position:0 -177px; }

.quest-type-desc { padding-bottom:20px; }


.section4 { background:url(../../images/game/guide/how-to-play/bg-inv.png) no-repeat; }
.section4 .section-list {  padding-right:50px; padding-left:0; }

.section5 { background:url(../../images/game/guide/how-to-play/bg-groups.jpg) no-repeat; }
.section5 .parchment { margin-top:-10px;  }
.section5 .parchment-interior { padding-top:40px;  }

.section5 .bullet-desc { padding-bottom:24px; }

.section5 .image-buffer { padding-top:457px; }

.aside { color:#73634c; font-style:italic; display:block; text-transform:none; font-size:14px; margin:0; }